<template>
  <div id='cartListItem' class='cartListItem'>
    <div class="cheBtn fl">
      <check-button :is-check=cartItem.checked @click.native="btnClick" />
    </div>
    <div class="shop-show fl">
      <img :src="cartItem.image" alt="" srcset="">
    </div>
    <div class="shop-info fr">
      <div class="shop-tit">
        <h5 class="shop-title one-txt-cut">{{cartItem.title}}</h5>
        <p class="shop-desc one-txt-cut">{{cartItem.desc}}</p>
      </div>
      <div class="shop-price">
        <span class="price fl">{{"￥"+cartItem.price}}</span>
        <span class="count fr">{{cartItem.count}}</span>
      </div>

    </div>

  </div>
</template>

<script>
  import CheckButton from '../../../components/content/checkBootn/CheckButton.vue'
  export default {
    name: 'cartListItem',
    props: { // 父辈向子辈传参
      cartItem: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    components: { // 组件的引用
      CheckButton
    },
    data() {
      return {

      }
    },
    methods: { // 方法
      btnClick() {
        this.cartItem.checked = !this.cartItem.checked
      }
    },
    computed: { // 计算属性

    },
    created() { // 实例被创建之后执行代码

    },
    mounted() { // 页面进入时加载内容

    },
    watch: { // 监测变化

    }
  }

</script>
<style scoped>
  .cartListItem {
    width: 100%;
    height: 160px;
    padding: 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
  }

  .cheBtn {
    margin-top: 50px;
    margin-right: 5px;
  }


  .shop-show img {
    width: 100px;
    height: 130px;
    border-radius: 5px;
  }

  .shop-info {
    width: 60%;
  }

  .shop-title {
    font-size: 20px;
    color: #333;
    font-weight: normal;
  }

  .shop-desc {
    margin-top: 20px;
    font-size: 15px;
  }

  .shop-price {
    margin-top: 35px;
    font-size: 19px;
  }

  .price {
    color: var(--color-high-text);
  }

  .count::before {
    content: "X";
    display: inline-block;
    font-size: 15px;

  }

</style>
